<template>
  <div class="login-container">
    <div class="logo">
      <img src="https://example.com/wechat-logo.png" alt="微信" />
    </div>
    <div class="login-form">
      <div class="form-group">
        <input type="text" placeholder="微信号/QQ号/邮箱" v-model="username" />
      </div>
      <div class="form-group">
        <input type="password" placeholder="密码" v-model="password" />
      </div>
      <button class="login-btn" @click="handleLogin">登录</button>
      <div class="footer-links">
        <a href="#">更多选项</a>
        <a href="#">注册账号</a>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "LoginPage",
  data() {
    return {
      username: "",
      password: "",
      error: null, // 确保 error 属性已定义
    };
  },
  methods: {
    async handleLogin() {
      try {
        const response = await this.$axios.post("/api/user/login", {
          username: this.username,
          password: this.password,
        });
        if (response.code === 200) {
          this.error = null;
          localStorage.setItem("token", response.data.token);
          localStorage.setItem("user", JSON.stringify(response.data.user));
          this.$router
            .push("/main")
            .then(() => {
              console.log("Navigation successful");
            })
            .catch((err) => {
              console.error("Navigation failed:", err);
            });
          this.$router.push("/main");
        } else {
          this.$message.error(response.data.message);
        }
      } catch (error) {
        this.error = error;
        this.$message.error("登录失败，请检查网络或联系管理员");
      }
    },
  },
};
</script>

<style scoped>
.login-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background-color: #f5f5f5;
}

.logo {
  margin-bottom: 40px;
}

.logo img {
  width: 120px;
  height: 120px;
}

.login-form {
  width: 300px;
  background: white;
  padding: 30px;
  border-radius: 5px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.form-group {
  margin-bottom: 20px;
}

input {
  width: 100%;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
}

.login-btn {
  width: 100%;
  padding: 12px;
  background-color: #07c160;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
}

.login-btn:hover {
  background-color: #06ad56;
}

.footer-links {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
  font-size: 14px;
}

.footer-links a {
  color: #576b95;
  text-decoration: none;
}

.footer-links a:hover {
  text-decoration: underline;
  align-items: center;
  justify-content: center;
  height: 100vh;
}
input,
button {
  margin: 10px;
  padding: 8px;
}
</style>
